<template>
  <div class="">
    <el-dialog :title="title" :visible.sync="dialogBoole" width="500px">
      <el-form :model="form" ref="form" label-width="90px" class="demo-form-inline">
        <el-form-item label="类型" prop="invoiceName">
          <el-radio-group v-model="form.invoiceName" v-if="isBool">
            <el-radio :label="1">个人开票</el-radio>
            <el-radio :label="2">企业开票</el-radio>
          </el-radio-group>
          <span v-else>
            <span v-if="form.invoiceName === '1'">个人开票</span>
            <span v-if="form.invoiceName === '2'">企业开票</span>
          </span>
        </el-form-item>
        <el-form-item label="开票金额" prop="invoiceAmount">
          <el-input :value="handleThousand(form.invoiceAmount)" v-if="isBool" disabled/>
          <span v-else>{{ format_thousand(form.invoiceAmount) }}</span>
        </el-form-item>
        <el-form-item label="发票类型:" prop="invoiceType" :rules="!isBool? []: rules.invoiceType">
          <el-select v-model="form.invoiceType" v-if="isBool" style="width: 100%" @change="handleChange"
                     placeholder="请选择发票类型">
            <el-option v-for="item in dict.type.invoice_type" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
          <span v-else>{{ selectDictLabel(dict.type.invoice_type, form.invoiceType) }}</span>
        </el-form-item>
        <el-form-item :label="form.invoiceName === 1 ? '客户名称:' : form.invoiceName === 2 ? '企业名称' : '客户名称:' "
                      :rules="!isBool? []: rules.customerName"
                      prop="customerName">
          <el-input v-if="isBool" v-model="form.customerName"
                    :maxlength="50"
                    :placeholder="form.invoiceName === 1 ? '请输入客户名称:' : form.invoiceName === 2 ? '请输入企业名称' : '请输入客户名称:' "/>
          <span v-else>{{ form.customerName }}</span>
        </el-form-item>

        <el-form-item label="税号:" prop="taxpayerCode" v-if="form.invoiceName === 2"
                      :rules="!isBool? []: rules.taxpayerCode">
          <el-input v-if="isBool" v-model="form.taxpayerCode" :maxlength="50" placeholder="请输入税号"/>
          <span v-else>{{ form.taxpayerCode }}</span>
        </el-form-item>

        <el-form-item label="开户银行:" prop="customerBankName"
                      :rules="!isBool? []: rules.customerBankName">
          <el-input v-if="isBool" v-model="form.customerBankName" :maxlength="50" placeholder="请输入开户银行"/>
          <span v-else>{{ form.customerBankName }}</span>
        </el-form-item>

        <el-form-item label="银行账号:" prop="customerBankAccountName"
                      :rules="!isBool? []: rules.customerBankAccountName">
          <el-input v-if="isBool" v-model="form.customerBankAccountName" :maxlength="50" placeholder="请输入银行账号"/>
          <span v-else>{{ form.customerBankAccountName }}</span>
        </el-form-item>
        <el-form-item label="地址:" prop="customerAddr">
          <el-input v-if="isBool" v-model="form.customerAddr" :maxlength="50" placeholder="请输入地址"/>
          <span v-else>{{ form.customerAddr }}</span>
        </el-form-item>

        <el-form-item label="联系电话:" prop="phone" :rules="!isBool? []: rules.phone">
          <el-input v-if="isBool" v-model="form.phone" :maxlength="50" placeholder="请输入联系电话"/>
          <span v-else>{{ form.phone }}</span>
        </el-form-item>

        <el-form-item label="邮箱:" prop="customerMail" :rules="!isBool? []: rules.customerMail">
          <el-input v-if="isBool" v-model="form.customerMail" :maxlength="50" placeholder="请输入邮箱"/>
          <span v-else>{{ form.customerMail }}</span>
        </el-form-item>

        <template v-if="!isBool">
          <el-form-item label="申请时间:">
            <span>{{ form.createTime }}</span>
          </el-form-item>

          <el-form-item label="申请人:">
            <span>{{ form.createBy }}</span>
          </el-form-item>

          <el-form-item label="开票时间:">
            <span v-if="form.updateTime == form.createTime">/</span>
            <span v-else>{{ form.updateTime }}</span>
          </el-form-item>

          <el-form-item label="发票附件:">
            <image-common v-if="form.invoiceImg" v-model="form.invoiceImg" :disabled="true"/>
            <span v-else>开票中</span>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClear">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" v-if="title === '开票申请'">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import {financeProceedsInvoice, getFinanceProceedsInvoice} from '@/api/vehicleDisposal/routineHandle.js'

export default {
  name: "invoice", //开票
  dicts: ["invoice_type"],
  computed: {
    required() {
      let a = this.title;
      return a;
    },
    handleThousand() {
      return function (val) {
        return val ? this.format_thousand(val) : 0
      };
    },
  },
  watch: {},
  data() {
    let validateBankAccount = (rule, value, callback) => {
      const bankAccountReg = /^\d{10,19}$/;
      // if (value === '') {
      //   callback(new Error('请输入银行账号'));
      // } else {
      //   if (bankAccountReg.test(value)) {
      //     callback();
      //   } else {
      //     callback(new Error('请输入有效的银行账号'));
      //   }
      // }
      if (!bankAccountReg.test(value)) {
        callback(new Error('银行账号格式不正确'));
      } else {
        callback();
      }
    };

    let validatePhone = (rule, value, callback) => {
      const phoneReg = /^1[3-9]\d{9}$/;
      if (value === '' || value === undefined || value === null) {
        callback();
      } else {
        if (phoneReg.test(value)) {
          callback();
        } else {
          callback(new Error('请输入有效的手机号码'));
        }
      }

    };

    let validateEmail = (rule, value, callback) => {
      const emailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (value === '' || value === undefined || value === null) {
        callback();
      } else {
        if (emailReg.test(value)) {
          return callback();
        } else {
          callback(new Error('请输入有效的邮箱地址'));
        }
      }
    }
    return {
      dialogBoole: false,
      form: {
        invoiceName: 1,
        businessCode: '',
        proceedsType: '',
        isNegativeNumberInvoice: 0,
      },
      title: "",
      isBool: false,
      rules: {
        invoiceType: [
          {required: true, message: "请选择发票类型", trigger: "change"},
        ],
        customerName: [
          {required: true, message: "请输入名称", trigger: "blur"},
        ],
        customerBankName: [
          {required: true, message: "请输入开户银行", trigger: "blur"},
        ],
        taxpayerCode: [
          {required: true, message: "请输入税号", trigger: "blur"},
        ],
        customerBankAccountName: [
          {required: true, message: '请输入银行账号', trigger: "blur"},
        ],
        phone: [
          {validator: validatePhone, trigger: 'blur'},
        ],
        // customerMail: [
        //   {validator: validateEmail, trigger: 'blur'},
        // ],
      },
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleOpen(type, row, bool, invoiceAmount) {
      this.title = type;
      if (this.title === '开票信息') {
        this.handleDetails(row.settleId)
      }
      this.isBool = bool;
      this.form.proceedsType = row.proceedsType
      this.form.mainOrderCode = row.mainOrderCode
      if (row.proceedsType === '14') {
        this.form.isNegativeNumberInvoice = ''
      } else {
        this.form.isNegativeNumberInvoice = 0
      }
      this.form.invoiceAmount = invoiceAmount
      this.form.businessCode = this.$route.query.vehicleDisposalNo
      this.dialogBoole = true;
    },

    async handleDetails(code) {
      try {
        let res = await getFinanceProceedsInvoice(code)
        this.form = res.data.find(a => a.isNegativeNumberInvoice === '' || a.isNegativeNumberInvoice === '0')
      } catch (e) {
        console.log(e)
      }
    },

    handleChange(val) {
      if (val) {
        let obj = this.dict.type.invoice_type.find(a => a.value = val)
        this.form.invoiceType = val
        this.form.invoiceTypeStr = obj.label
        this.$set(this.form, 'invoiceTypeStr', obj.label)
      }
    },

    handleClear() {
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
      this.dialogBoole = false;
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.transientState = '0'
          financeProceedsInvoice(this.form).then(res => {
            if (res.code === 200) {
              this.$message.success('开票申请成功')
              this.$emit('reset')
              this.dialogBoole = false
            }
          })
        }
      });
    },
  },
};
</script>

<style scoped lang=""></style>


